<template>
  <!-- 17、所有页面添加骨架屏效果 -->
    <van-skeleton title avatar :row="3" :loading="loading">
  <div>
    <van-nav-bar title="购物车" left-arrow @click-left="() => $router.back()">
      <template #right> ... </template>
    </van-nav-bar>
    <p class="chao">
      <span>朝阳区三环到四环之间</span>
      <span>|&emsp;编辑商品</span>
    </p>
    <div v-if="list.length">
      <van-card
        v-for="item in list"
        :key="item"
        :price="item.price"
        :title="item.title"
      >
        <template #thumb>
          <div class="checkbox-img">
            <van-checkbox v-model="item.checked"></van-checkbox>
            <img :src="item.img" alt="" />
          </div>
        </template>
        <template #num>
          <van-stepper v-model="item.num" @click="onchange" />
        </template>
        <template #tags>
          <van-tag plain type="primary">7天价保</van-tag>
        </template>
        <template #footer>
          <van-button size="mini">收藏</van-button>
          <van-button size="mini">删除</van-button>
        </template>
      </van-card>
    </div>
    <!-- 12、处理购物车页面无数据时占位图处理 -->
    <div v-if="!list.length">
      <img
        class="img"
        src="https://file.psd.cn/2022/01-25/fa938291576bfd1ad14397ad58b9d776.jpg"
        alt=""
      />
    </div>
    <div v-if="list.length">
      <van-submit-bar :price="zprice * 100" button-text="去结算" @submit="onSubmit">
        <van-checkbox v-model="allchecked">全选</van-checkbox>
      </van-submit-bar>
    </div>

    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</van-skeleton>
  
</template>
<script setup>
import axios from "@/request/index";
import { computed, ref,onMounted } from "vue";
import shake from "@/utils";

const active = ref(2);
const list = ref([]);
axios.get("/getcart").then((res) => {
  // console.log(res);
  list.value = res.list;
});
// 14、自定义防抖函数，添加购物车操作和操作商品数量做防抖处理
const onchange = shake(() => {
  list.value.num--;
}, 800);
// 15、实现购物车商品单选、全选、全不选功能
const allchecked = computed({
  get() {
    return list.value.every((item) => item.checked);
  },
  set(val) {
    list.value.forEach((item) => (item.checked = val));
  },
});
// 16、操作商品数量以及商品选中时正确计算总价，争取处理精度问题
const zprice = computed(()=>{
  let zprice = 0
  let checkbox = list.value.filter(item=>item.checked)
  checkbox.forEach(item=>{
    zprice += item.price * item.num
  })
  return zprice
})

const loading = ref(true);
onMounted(() => {
  setTimeout(() => {
    loading.value = false;
  }, 800);
});
</script>
<style scoped lang='scss'>
.img {
  width: 100vw;
  height: 80vh;
}
:deep(.van-card__title) {
  margin-left: 20px;
}
:deep(.van-tag) {
  margin-left: 20px;
}
:deep(.van-card__price) {
  margin-left: 20px;
}

.checkbox-img {
  width: 110px;
  display: flex;
  img {
    width: 80px;
    height: 80px;
  }
}
:deep(.van-nav-bar__right) {
  font-size: 30px;
  margin-bottom: 15px;
}
.chao {
  span:nth-child(1) {
    margin-left: 20px;
  }
  span:nth-child(2) {
    margin-left: 94px;
  }
}
.van-submit-bar {
  margin-bottom: 50px;
}
</style>